<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<title>登录</title>
	<link rel="stylesheet" href="{{ url_for('users.static', filename='component/pear/css/pear.css') }}" />
	<link rel="stylesheet" href="{{ url_for('users.static', filename='admin/css/other/login.css') }}" />
	<link rel="stylesheet" href="{{ url_for('users.static', filename='admin/css/variables.css') }}" />
	<script>if (window.self != window.top) { top.location.reload();}</script>
</head>

<body>

	<div class="login-page" style="background-image: url({{ url_for('users.static', filename='admin/images/background.svg') }})">
		<form class="layui-form" action="javascript:void(0);">
        <div class="layui-row">
			<div class="layui-col-sm6 login-bg layui-hide-xs">
				<img class="login-bg-img" src="{{ url_for('users.static', filename='admin/images/banner.png') }}" alt="" />
			</div>
			<div class="layui-col-sm6 layui-col-xs12 login-form">
				<div class="layui-form">
					<div class="form-center">
						<div class="form-center-box">
							<div class="top-log-title">
								<img class="top-log" src="{{ url_for('static', filename='images/logo72x72.png') }}" alt="" />
								<span>北京三十五中</span>
							</div>
							<div class="top-desc">
                                <h3>诚 真 勇 毅 勤 美 严 实</h3>
							</div>
							<div style="margin-top: 30px;">
								<div class="layui-form-item">
									<div class="layui-input-wrap">
										<div class="layui-input-prefix">
											<i class="layui-icon layui-icon-username"></i>
										</div>
										<input lay-verify="required" placeholder="账户" autocomplete="off"
											class="layui-input" name="username">
									</div>
								</div>
								<div class="layui-form-item">
									<div class="layui-input-wrap">
										<div class="layui-input-prefix">
											<i class="layui-icon layui-icon-password"></i>
										</div>
										<input type="password" name="password" value=""
											lay-verify="required|confirmPassword" placeholder="密码" autocomplete="off"
											class="layui-input" lay-affix="eye">
									</div>
								</div>
								<div class="tab-log-verification">
									<div class="verification-text">
										<div class="layui-input-wrap">
											<div class="layui-input-prefix">
												<i class="layui-icon layui-icon-auz"></i>
											</div>
											<input lay-verify="required" value="" placeholder="验证码" autocomplete="off"
												class="layui-input" name="captcha">
										</div>
									</div>
									<img src="{{ url_for('users.users_index.captcha') }}" alt=""
										class="verification-img" id="captchaImage" />
								</div>
								<div class="layui-form-item">
{#									<div class="remember-passsword">#}
{#										<div class="remember-cehcked">#}
{#											<input type="checkbox" name="like1[write]" lay-skin="primary" title="自动登录">#}
{#										</div>#}
{#									</div>#}
								</div>
								<div class="login-btn">
									<button type="button" lay-submit lay-filter="login" class="layui-btn login">登 录</button>
								</div>
								<div class="other-login">
									<div class="other-login-methods">
										其他方式
									</div>
									<div class="greenText">忘记密码</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
        </form>
	</div>

	<!-- 资 源 引 入 -->
	<script src="{{ url_for('users.static', filename='component/layui/layui.js') }}"></script>
	<script src="{{ url_for('users.static', filename='component/pear/pear.js') }}"></script>
	<script>
		layui.use(['form', 'button', 'popup'], function () {
            let $ = layui.jquery;
			var form = layui.form;
			var button = layui.button;
			var popup = layui.popup;
            let captchaPath = "{{ url_for('users.users_index.captcha') }}";

            /**
             * 刷新验证码函数
             */
            const refreshCaptchaImage = (function () {
                let captchaImage = document.getElementById("captchaImage")
                return function () {
                    captchaImage.src = captchaPath + "?" + Math.random()
                }
            })()
            /**
             * 立即刷新验证码并且每隔 30秒 刷新
             */
            const initCaptchaImageTimer = (function () {
                let captchaImageTimer = null
                return function () {
                    clearInterval(captchaImageTimer)
                    captchaImageTimer = setInterval(function () {
                        refreshCaptchaImage()
                    }, 30 * 1000);
                    refreshCaptchaImage()
                }
            })()
            initCaptchaImageTimer()
            // 监听回车提交表单
            $(document).keydown(function (event) {
                if (event.keyCode === 13) {
                    $('.login').click();
                }
            })
			// 登 录 提 交
			form.on('submit(login)', function (data) {
                let loader = layer.load();
                let btn = button.load({elem: '.login'});
                $.ajax({
                    data: JSON.stringify(data.field),
                    type: "post",
                    dataType: 'json',
                    contentType: 'application/json',
                    success: function (result) {
                        layer.close(loader);
                        btn.stop(function () {
                            if (result.success) {
                                popup.success(result.msg, function () {
                                    location.href = "{{ url_for('index.index') }}";
                                })
                            } else {
                                popup.failure(result.msg, function () {
                                    initCaptchaImageTimer()
                                });
                            }
                        })
                    }
                });
                return false;
            });
            $("#captchaImage").click(function () {
                initCaptchaImageTimer()
            });
		})
	</script>
<script>
    if (window !== top) {
        top.location.href = location.href;
    }
</script>
</body>

</html>
